<template>
  <div class="edit-panel">
    <a-drawer
      placement="right"
      :closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
      width="700"
    >
      <div slot="title">
        <div class="edit-header">
          <div class="header-left">
            <div class="commu-name">{{item.commu}}</div>
            <a class="same-quick-btn">查找同小区 <a-icon type="double-right" /></a>
          </div>
          <div class="header-close">
            <img src="/default/icon/icon_close_2.png" />
          </div>
        </div>
      </div>
      <div class="edit-banner">
        <Banner :item="item" />
      </div>
      <div class="edit-container">
        <HouseInfo :item="item" />
      </div>
      <div style="height:80px;"></div>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-input placeholder="写备注" :style="{ marginRight: '8px', width: '120px' }" />
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          写备注
        </a-button>
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          客户带看
        </a-button>
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          取消
        </a-button>
        <a-button type="primary" @click="onClose">
          保存
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import Banner from './Banner'
import HouseInfo from './HouseInfo'

export default {
  components: {
    Banner,
    HouseInfo
  },
  data () {
    return {
      visible: false,
      item: {}
    }
  },
  methods: {
    afterVisibleChange (val) {
      console.log('visible', val)
    },
    showDrawer (item) {
      this.item = item
      this.visible = true
    },
    onClose () {
      this.visible = false
    }
  }
}
</script>

<style lang="less">
.edit-panel{
  -webkit-app-region: no-drag;
}
.edit-header{
  -webkit-app-region: no-drag;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-left{
    display: flex;
    align-items: center;
    .commu-name{
      margin-right: 20px;
    }
    .same-quick-btn{
      font-weight: normal;
      font-size: 13px;
    }
  }
  .header-close{
    cursor: pointer;
    img{
      width: 20px;
    }
  }
}
.edit-container{
  margin-top: 20px;
}
</style>
